<template>
  <div class="app-container">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
            查看已删门店
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row show-summary sum-text="合计" :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="门店名称" width="250" sortable prop="store_name">
          <template slot-scope="scope">
            <el-button type="text" @click="goPage(scope.row)">{{scope.row.store_name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" width="95" prop="item_total" label="应收合计" sortable :render-header="(h,obj) => renderHeader(h,obj,'应收合计不包含追账金额')">
        </el-table-column>
        <el-table-column align="center" label="差异" prop="diff" sortable>
          <template slot-scope="scope">
            <span :class="{'danger': scope.row.diff!=0}">{{scope.row.diff}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="收银台收入">
          <el-table-column align="center" prop="m0" label="现金"></el-table-column>
          <el-table-column align="center" prop="m1" label="支付宝"> </el-table-column>
          <el-table-column align="center" prop="m2" label="微信"></el-table-column>
          <el-table-column align="center" prop="m3" label="银行卡"></el-table-column>
          <el-table-column align="center" prop="m6" label="代收待核"></el-table-column>
          <el-table-column align="center" prop="m7" label="口碑核销"></el-table-column>
          <el-table-column align="center" prop="m8" label="快盈核销"></el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="m10_program" label="小程序核销"></el-table-column>
        <el-table-column align="center" label="机台扫码收入">
          <el-table-column align="center" prop="qr_money_aliy" label="支付宝"></el-table-column>
          <el-table-column width="90" align="center" prop="qr_money_aliy_refund" label="支付宝退款"></el-table-column>
          <el-table-column align="center" prop="qr_money_wx" label="微信"></el-table-column>
          <el-table-column align="center" prop="qr_money_wx_refund" label="微信退款"></el-table-column>
        </el-table-column>
        <el-table-column align="center" label="兑币机收入">
          <el-table-column align="center" prop="d0" label="现金"></el-table-column>
          <el-table-column align="center" prop="d1" label="支付宝"></el-table-column>
          <el-table-column align="center" prop="d2" label="微信"></el-table-column>
        </el-table-column>
        <el-table-column align="center" prop="recover_money" label="追账金额"></el-table-column>
      </el-table>

    </div>
  </div>
</template>
<script>
import { getList, getPage, getStoreList } from '@/api/finance/account.js';
import { pickerOptionsF, pickerDateF, optionMaxTime, renderHeader } from '@/utils';
export default {
  data() {
    return {
      renderHeader,
      list: [],
      listLoading: false,
      storeList: [],
      formInline: {
        store: '',
        start_time: '',
        end_time: '',
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateF()
    };
  },
  created() {
    this.getStore();
  },
  methods: {
    lookDelChange() {
      this.getStore();
    },
    goPage(row) {
      this.$router.push({
        name: 'report/revenueAll_form',
        params: {
          store_id: row.store_id,
          pickerDate: this.pickerDate,
          look_del: this.formInline.look_del,
          from: 1 //1.账务查询跳转，2.实收汇总跳转，
        },
        query: { routerflag: 1 }
      });
    },
    getStore() {
      getStoreList({ look_del: this.formInline.look_del, category_id: 27 }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store = data[0].id;
        } else {
          if (this.storeList.length > 0) {
            this.formInline.store = this.storeList[0].id;
          }
        }
        // if (this.list == null) {
          this.searchClick();
        // }
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then(response => {
          response.store.forEach(val => {
            val.diff =
              (val.m0 * 1 + val.m3 * 1 + val.m6 * 1 - val.bank_actual * 1 - val.cash_actual * 1 - val.collecting_actual * 1 - val.recover_money * 1).toFixed(
                2
              ) * 1;
            val.m0 = (val.m0 * 1 + val.z0 * 1).toFixed(2) * 1;
            val.m1 = (val.m1 * 1 + val.z1 * 1).toFixed(2) * 1;
            val.m2 = (val.m2 * 1 + val.z2 * 1).toFixed(2) * 1;
            val.m3 = (val.m3 * 1 + val.z3 * 1).toFixed(2) * 1;
            val.m5 *= 1;
            val.m6 = (val.m6 * 1 + val.z4 * 1).toFixed(2) * 1;
            val.m7 *= 1;
            val.m8 *= 1;
            val.m10_program = (val.m10_program / 1).toFixed(2);
            val.item_total =
              (
                val.m0 * 1 +
                val.m1 * 1 +
                val.m2 * 1 +
                val.m3 * 1 +
                val.m6 * 1 +
                val.m7 * 1 +
                val.m8 * 1 +
                val.qr_money_aliy * 1 +
                val.qr_money_wx * 1 +
                val.d0 * 1 +
                val.d1 * 1 +
                val.d2 * 1 -
                val.qr_money_aliy_refund * 1 -
                val.qr_money_wx_refund * 1 +
                val.m10_program * 1
              ).toFixed(2) * 1;
          });
          this.list = response.store;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>